<template>
	<view class="Audio">
		<!-- 列表 -->
        <view class="margin flex align-center padding-xs bg-white radius"  @click="()=>handle(item)" v-for="item in rbdOption.value" :key="item.id">
			<view style="width: 200upx;height: 250upx;">
				<image style="width: 100%;height: 100%;" :src="item.cover" mode="aspectFit"></image>
			</view>
			<view class="margin-left" style="flex: auto;">
				<view class="text-black">{{item.name}}</view>
				<view class="margin-top-sm text-sm text-gray">作者：{{item.author}}</view>
				<view class="margin-top-sm text-sm text-gray">系统评分：<text class="text-red">{{item.score}}分</text></view>
			</view>
			<view class="margin-right-sm text-gray margin-left text-sm ">{{item.createdTime | dayjsFormat("MM-DD HH:mm")}}</view>
		</view>
		<!-- 状态 -->
		<Divider v-if="rbdStatus" :text="rbdOption.value.length==0 ? '暂无数据' : '没有更多数据了'" />

		<!-- ios兼容 -->
		<view class="ios-safe"></view>
	</view>
</template>

<script>
	import CardLateral from '@/plugin/card_lateral.vue';
	import Divider from '@/plugin/divider.vue'

	import * as api from '@/api/Audio/index.js';

	import reachBottomDistance from '@/utils/reach_bottom_distance.js';
	
	import dayjs from '@/utils/dayjs.min.js'
	export default {
		components: {
			CardLateral,
			Divider
		},
		mixins: [reachBottomDistance],
		filters:{
		  dayjsFormat(val,format){
			  return dayjs(val).format(format)
		  }	
		},
		data() {
			return {

			}
		},
		onLoad() {
			this.rbdLoadingFn();
		},
		methods: {
			// rbdMixin
			rbdReqeust(params) {
				return api.recordingList(params.page, params.pageSize);
			},
			// 前往阅读页面
			handle(item) {
				uni.navigateTo({
					url: `/pages/ReadBook/index?id=${item.bookId}&type=Audio&page=${item.pageIndex}`
				})
			},
		}
	}
</script>

<style>
</style>